<template>
    <el-dialog
             center
            :before-close="handClose"
            width="30%"
            title="列表"
            :visible.sync="off"
            append-to-body>
            <el-tabs
                v-model="activeIndex"
                type="border-card"
                >
                <el-tab-pane
                    label="所属角色"
                    name="ss"
                >
                     <el-table :data="roleData1" style="width: 100%" border>
                        <el-table-column type="selection">
                        </el-table-column>
                        <el-table-column type="index" label="序号" width="200" align="center" :index="indexSort">
                        </el-table-column>
                        <el-table-column prop="roleName" label="角色名" align="center">
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" @click="delrole(scope.row)">删除角色</el-button>
                            </template>
                        </el-table-column> 
                    </el-table>
                </el-tab-pane>
                 <el-tab-pane
                    label="分配角色"
                    name="fp"
                >
                    <el-table ref="allocationRole" @select="select" :data="roleData2" style="width: 100%" border>
                        <el-table-column type="selection">
                        </el-table-column>
                        <el-table-column type="index" label="序号" width="200" align="center" :index="indexSort">
                        </el-table-column>
                        <el-table-column prop="roleName" label="角色名" align="center">
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
             </el-tabs>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submit">提交</el-button>
            </div>
        </el-dialog>
</template>

<script>
    import {roleDetail, roleDetailAll, allocationRole, delRole, getAllMenu, } from "@/api/admin.js"
    export default {
        name: "role",
        props: {
            off: {
                type: Boolean
            },
            rowData: {
                type: Object
            },
        },
        watch: {
            off(val){
                if(val){
                    roleDetail({
                        userId: this.rowData.userId
                    }).then(
                        res => {
                            console.log("所属角色res", res);
                            this.roleData1 = res.data;
                            roleDetailAll({
                                currentPage: this.currentPage,
                                pageSize: this.pageSize,
                            }).then(
                                res => {
                                    console.log("分配角色res", res);
                                    this.roleData2 = res.data.list;
                                    this.totalElements = res.data.total;
                                    this.roleData2.forEach((e1) => {
                                        this.roleData1.forEach((e2) => {
                                            if(e1.roleId == e2.roleId){
                                                console.log("相等");
                                                setTimeout(() => {
                                                    this.$refs.allocationRole.toggleRowSelection(e1, true);
                                                }, 1000);
                                                this.selectRole.push(e1);
                                            }
                                        });
                                    });
                                },
                                err => {

                                }
                            );
                        },
                        err => {

                        }
                    );
                }
            }
        },
        data(){
            return {
                roleData1: [],
                roleData2: [],
                activeIndex: "ss",
                pageSize: 15,
                currentPage: 1,
                totalElements: 0,
                totalPages: 1,
                selectRole: []
            }
        },
        methods: {
            handClose(){
                this.$emit("update:off", false);
            },
            select(selection, row){
                console.log("row", row);
                if(this.selectRole.length == 0){
                    this.selectRole.push(row);
                }else{
                    let flag = this.selectRole.find(e => e.roleId == row.roleId);
                    if(!flag){
                        this.selectRole.push(row);
                    }else{
                        this.selectRole = this.selectRole.filter((e) => {
                            return e.roleId != row.roleId;
                        });
                    }
                }
                console.log("selectRole", this.selectRole);
            },
            delrole(row){
                console.log("row", row);
                delRole({
                    roleId: row.roleId,
                    userId: row.userId
                }).then(
                    res => {
                        this.$message({
                            type: "success",
                            message: "删除成功"
                        });
                    },
                    err => {}
                );
            },
            submit(){
                var obj = {
                    userId: this.rowData.userId,
                    roles: this.selectRole
                };
                allocationRole(obj).then(
                    res => {
                        console.log("res分配角色", res);
                        this.$message({
                            type: "success",
                            message: "分配角色成功"
                        });
                        this.close();
                    },
                    err => {}
                );
            },
            close(){
                this.$parent.roleDetailDialog = false;
                this.activeIndex = "ss";
                this.selectRole = [];
            },
            indexSort(index){
                return ++index;
            }
        }
    }
</script>

<style tyoe="less" scoped></style>